<template>
  <view>
    <!-- 详细信息 -->
    <view class="clientInfo">
      <view class="userInfo flex-row align-center">
        <image :src="userInfo.avatar" mode="" />
        <view class="box flex-row align-center justify-between">
          <view class="content">
            <view class="flex-row">
              <text class="title">{{ userInfo.name }}</text>
              <u-icon
                name="woman"
                size="18"
                v-if="userInfo.gender == 1"
              ></u-icon>
              <u-icon name="man" size="18" v-if="userInfo.gender == 2"></u-icon>
              <text class="wechat">@{{ userInfo.type_text }}</text>
            </view>
            <view>
              <text>添加时间:</text>
              {{ userInfo.fl_createtime_text }}
            </view>
          </view>
          <text @click="handleGoEdit">编辑</text>
        </view>
      </view>
      <view class="flex-row justify-between source">
        <view>
          <text>来源:</text>
          {{ userInfo.fl_add_way }}
        </view>
        <view>
          <text>电话:</text>
          {{ userInfo.fl_remark_mobiles || '暂无数据' }}
        </view>
      </view>
      <view
        class="notice flex-row justify-between"
        @tap="goWhere('/pages/client/backlog/index')"
      >
        <view class="flex-row align-center">
          <image src="@/static/img/rl.png" mode="" />
          <view>
            当前客户有<text>{{ userInfo.todo_count }}</text
            >条任务需完成
          </view>
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <view class="flex-row justify-between source last">
        <view @tap="goWhere('/pages/client/friends')">
          <text>添加成员:</text>
          {{ worker.name }}等{{ worker.total }}人>
        </view>
        <view class="flex-row" @tap="goWhere('/pages/client/group')">
          <text>所在群聊:</text>
          {{ workerGroupName }} >
        </view>
      </view>
    </view>
    <!-- 标签 -->
    <view class="tags">
      <view class="title flex-row justify-between">
        <view>企业标签</view>
        <button @tap="goWhere('/pages/base/setLabel?ids=' + tagIds)">
          +添加
        </button>
      </view>
      <view class="list flex-row">
        <view v-for="(item, index) in userInfo.fl_tags" :key="index">
          <text v-for="(child, idx) in item.tags" :key="idx">{{
            child.tag_name
          }}</text>
        </view>
      </view>
    </view>
    <!-- 功能 -->
    <view class="content">
      <view class="tab">
        <u-tabs :list="list" @click="handleTab" :current="activeTab"></u-tabs>
      </view>
      <view class="box">
        <Apply
          :searchGroupList="searchGroupList"
          @setSearchGroupData="setSearchGroupData"
          v-if="activeTab == 4"
        />
        <Dynamic :dynamicList="dynamicList" v-if="activeTab == 0" />
        <Follow :follwInfoList="follwInfoList" v-if="activeTab == 2" />
        <Info :fieldInfoList="fieldInfoList" v-if="activeTab == 1" />
        <Order
          :orderInfo="orderInfo"
          :orderInfoList="orderInfoList"
          :orderState="orderState"
          @setOrderState="setOrderState($event)"
          @refreshOrderList="refreshOrderList"
          v-if="activeTab == 3"
        />
      </view>
    </view>
    <!--  -->
    <Tabbar />
  </view>
</template>
<script>
import {
  sidebarCustomer,
  findWorkerGroup,
  findWorker,
  getDynamicList,
  getFollwList,
  getOrderList,
  getFieldInfoList,
  getAfterSaleList,
  getSearchGroup,
} from '@/config/api'
import Tabbar from '@/components/tabbar'
import Apply from './components/apply'
import Dynamic from './components/dynamic'
import Follow from './components/follow'
import Info from './components/info'
import Order from './components/order'
import InitWx from '@/mixins/init-wx'
import { getCurExternalContact } from '@/util/wxConfig.js'
export default {
  mixins: [InitWx],
  components: {
    Tabbar,
    Apply,
    Dynamic,
    Follow,
    Info,
    Order,
  },
  data() {
    return {
      list: [
        {
          name: '动态',
        },
        {
          name: '信息',
        },
        {
          name: '跟进',
        },
        {
          name: '订单',
        },
        {
          name: '报名',
        },
      ],
      activeTab: 0,
      userInfo: {},
      worker: {},
      workerGroupName: '',
      userid: uni.getStorageSync('clientId'),
      dynamicList: [],
      fl_userid: uni.getStorageSync('UserId'),
      fieldInfoList: [],
      follwInfoList: [],
      orderInfoList: [],
      afterSaleList: [],
      searchGroupList: [],
      orderNumInfo: {},
      orderInfo: {},
      orderStateHttpApi: getOrderList,
      orderState: 1,
      hasMore: true,
      page: 1,
      size: 10,
      tagIds: '',
    }
  },
  async onLoad() {
    let that = this
    uni.$on('init', () => {
      this.initLabel()
    })
    //签名
    await this.initSignature()
    //获取外部联系人id
    let res = await getCurExternalContact()
    this.userid = res
    this.getInitData()
    this.getField()
    this.getOrderInitData()
    this.getOrderState(getOrderList)
    this.getTabData(getDynamicList, 'dynamicList', this.userid)
    this.getTabData(getFollwList, 'follwInfoList', this.userid)
    this.getTabData(getSearchGroup, 'searchGroupList', this.userid)
  },
  onShow() {},
  methods: {
    initLabel() {
      this.getInitData()
    },
    goWhere(url) {
      uni.navigateTo({
        url,
      })
    },
    async getInitData() {
      const result = await sidebarCustomer({
        userid: this.userid,
        fl_userid: this.fl_userid,
      })

      let arr = []
      result.fl_tags.map((item) => {
        item.tags.map((child) => {
          arr.push(child.tag_id)
        })
      })
      console.log(arr)

      this.tagIds = arr.join(',')
      // console.log(this.tagIds)
      this.userInfo = result

      const workerGroup = await findWorkerGroup({
        userid: this.userid,
      })

      this.workerGroupName = workerGroup.total + ' 个群'

      const worker = await findWorker({
        userid: this.userid,
      })
      this.worker = {
        name: worker.data[0].name,
        total: worker.total,
      }
    },
    //信息列表
    async getField() {
      const getFieldInfo = await getFieldInfoList({
        userid: this.userid,
        fl_userid: this.fl_userid,
      })
      this.fieldInfoList = getFieldInfo.field
    },
    //刷新列表
    refreshOrderList() {
      this.setOrderState(1)
    },
    //报名切换
    async setSearchGroupData(num) {
      this.searchGroupList = []
      this.current = 1
      this.hasMore = true
      this.page = 1
      this.getTabData(getSearchGroup, 'searchGroupList', this.userid)
      uni.showToast({
        title: '操作成功!',
        duration: 500,
      })
    },

    //默认订单信息
    async getOrderState(httpApi) {
      const res = await httpApi({
        userid: this.userid,
        fl_userid: this.fl_userid,
        page: this.page,
      })
      if (res.data?.length < this.size) {
        this.hasMore = false
      }
      this.orderInfoList = [...this.orderInfoList, ...res.data]
    },
    setOrderState(num) {
      this.orderState = num
      this.orderInfoList = []
      this.current = 1
      this.hasMore = true
      this.page = 1
      if (num == 1) {
        this.getOrderState(getOrderList)
        this.orderStateHttpApi = getOrderList
      } else {
        this.getOrderState(getAfterSaleList)
        this.orderStateHttpApi = getAfterSaleList
      }

      uni.showToast({
        title: '操作成功!',
        duration: 500,
      })
    },
    //订单默认信息
    async getOrderInitData() {
      const res = await getOrderList({
        userid: this.userid,
        fl_userid: this.fl_userid,
      })
      this.orderInfo = res
    },

    async getTabData(httpApi, name, userid) {
      const res = await httpApi({
        userid,
        fl_userid: this.fl_userid,
        size: this.size,
        page: this.page,
      })

      if (res.data?.length < this.size) {
        this.hasMore = false
      }
      this[name] = [...this[name], ...res.data]
    },
    handleTab(e) {
      this.activeTab = e.index
      this.current = 1
      this.hasMore = true
      this.page = 1
    },
    handleGoEdit() {
      uni.navigateTo({
        url: '/pages/base/infoEdit',
      })
    },
    onReachBottom() {
      if (!this.hasMore) {
        return
      }
      this.page++
      if (this.activeTab == 0) {
        this.getTabData(getDynamicList, 'dynamicList', this.userid)
      }

      if (this.activeTab == 2) {
        this.getTabData(getFollwList, 'follwInfoList', this.userid)
      }

      if (this.activeTab == 3) {
        this.getOrderState(this.orderStateHttpApi)
      }

      if (this.activeTab == 4) {
        this.getTabData(getSearchGroup, 'searchGroupList', this.userid)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.clientInfo {
  padding: 28rpx;
  background: #fff;

  .userInfo {
    & > image {
      width: 100rpx;
      height: 100rpx;
      margin-right: 24rpx;
      border-radius: 12rpx;
    }
    .box {
      width: calc(100% - 124rpx);
      & > text {
        color: #159eec;
        font-size: 26rpx;
      }
      .content {
        height: 100rpx;
        padding: 8rpx 0;
        & > view:first-child {
          margin-bottom: 16rpx;
          .title {
            font-size: 36rpx;
          }
          .wechat {
            color: #37932a;
          }
          /deep/ .uicon-woman {
            color: #ef445e !important;
            margin: 0 12rpx;
          }
          /deep/ .uicon-man {
            color: #159eec !important;
            margin: 0 12rpx;
          }
        }
        & > view:last-child {
          text {
            color: #9999a5;
          }
        }
      }
    }
  }
  .source {
    margin-top: 20rpx;
    text {
      color: #9999a5;
    }
  }
  .notice {
    background: #f3fafe;
    border-radius: 8rpx;
    height: 92rpx;
    padding: 0 32rpx;
    margin: 28rpx 0;
    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 24rpx;
    }
  }
  .source.last {
    view {
      color: #159eec;
    }
  }
}
.tags {
  margin-top: 16rpx;
  background: #fff;
  padding: 28rpx;
  .title {
    view {
      font-size: 26rpx;
      font-family: PingFang SC-中黑体, PingFang SC;
      font-weight: normal;
      display: flex;
      align-items: center;
      font-weight: 550;
    }
    view:before {
      content: '';
      display: inline-block;
      width: 4rpx;
      height: 30rpx;
      background: #159eec;
      margin-right: 10rpx;
    }
    button::after {
      border: none;
    }
    button {
      margin: 0;
      padding: 0;
      color: #fff;
      width: 116rpx;
      height: 48rpx;
      border-radius: 40rpx;
      background: #159eec;
      line-height: 48rpx;
      font-size: 26rpx;
    }
  }
  .list {
    margin-top: 28rpx;
    flex-wrap: wrap;
    text {
      height: 40rpx;
      background: #f2f2f2;
      color: #5a6062;
      margin-right: 16rpx;
      padding: 0 8rpx;
    }
  }
}
.content {
  background: #fff;
  margin-top: 16rpx;
  .tab {
    padding: 16rpx;
  }
  .box {
    padding: 0 28rpx 28rpx;
  }
  /deep/ .u-tabs__wrapper__nav__item {
    height: 70rpx !important;
  }
}
</style>
